$(function () {
    //区域滚动初始化
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        indicators: false//是否显示滚动条
        });

        // 1、在页面初始化时，关键字在输入框内
        // 获取关键字,用location.search方法
    var paramsUrl = CT.getParamsByUrl()
        // 关键字放入输入框内
    $('.ct_search input').val(paramsUrl.key || '')

    //2、页面初始化时根据关键字查询第一页数据，4个
    getSearchData({
        proName: paramsUrl.key,
        pageSize: 4,
        page: 1
    }, function (data) {
        //把数据渲染出来
        $('.ct_product').html(template('product_list', data))
    })
    // 3、当用户重新点击搜索时，根据新的关键字排序商品，重置排序功能
    $('.ct_search a').on('tap', function () {
        var key = $.trim($('.ct_search input').val())
        if (!key) {
            mui.toast('请输入搜索信息')
            return false
        }
        $('.ct_search input').val(key)
        getSearchData({
            proName: key,
            pageSize: 4,
            page: 1
        }, function (data) {
            //把数据渲染出来
            $('.ct_product').html(template('product_list', data))
        })
    })
    // 4、用户点击排序选项时，根据选项进行排序
    $('.ct-order a').on('tap', function () {
        //如果它之前不含这个类
        if (!$(this).hasClass('now')) {
            $(this).addClass('now').siblings().removeClass('now').find('span').removeClass('fa-angle-up').addClass('fa-angle-down')
        } else {
            //改变当前样式
            if ($(this).find('span').hasClass('fa-angle-up')) {
                $(this).find('span').removeClass('fa-angle-up').addClass('fa-angle-down')
            } else {
                $(this).find('span').removeClass('fa-angle-down').addClass('fa-angle-up')
            }

        }

        // $(this).addClass('now').siblings().removeClass('now')
        // // $(this).parent().find('a').removeClass('now')
        // $(this).addClass('now')
        // 获取当前点击的功能参数 price 1 升序 2 降序 num 1 升序 2 降序
        var order = $(this).attr('data-order')
        var orderVal = $(this).find('span').hasClass('fa-angle-down') ? 2 : 1
        var key = $.trim($('.ct_search input').val())
        var params = {
            proName: key,
            pageSize: 4,
            page: 1
        }
        params[order] = orderVal;
        // 获取数据和渲染
        getSearchData(params, function (data) {
            $('.ct_product').html(template('product_list', data))
        })
    })
    // 5、下拉刷新
    mui.init({
        pullRefresh : {
            container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            //下拉
            down : {
                style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                // auto: true,//可选,默认false.首次加载自动上拉刷新一次
                //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                callback: function () {
                    var that = this
                   setTimeout(function  () {
                       //排序功能重置
                       $('.ct-order a').removeClass('now').find('span').removeClass('fa-angle-up').addClass('fa-angle-down')
                       var key = $.trim($('.ct_search input').val())
                       if (!key) {
                           mui.toast('请输入搜索信息')
                           return false
                       }
                       getSearchData({
                           proName: key,
                           pageSize: 4,
                           page: 1
                       }, function (data) {
                           $('.ct_product').html(template('product_list', data))
                       })
                       // 下拉刷新停止
                       // mui("#refreshContainer").pullRefresh().endPulldownToRefresh()
                       that.endPulldownToRefresh()
                       //上拉加载重置:（上拉了几次之后）当下拉刷新之后，页面显示为4个，可以再上拉加载
                       // mui("#refreshContainer").refresh(true)
                       that.refresh(true)
                   }, 2000)
                }
            },
            // 上拉
            up : {
                //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                callback: function () {
                    var that = this
                    console.log('加载')
                    var key = $.trim($('.ct_search input').val())
                    if (!key) {
                        mui.toast('请输入搜索信息')
                        return false
                    }
                    window.page++
                    var order = $('.ct-order a.now').attr('data-order')
                    var orderVal = $('.ct-order a.now').find('span').hasClass('fa-angle-down') ? 2 : 1
                    var params = {
                        proName: key,
                        pageSize: 4,
                        page: window.page
                    }
                    params[order] = orderVal;
                    getSearchData(params, function (data) {
                       setTimeout(function () {
                           //append方法时追加，前面的还在，只往后面加
                           $('.ct_product').append(template('product_list', data))
                           // 没有数据了就停止加载
                           if (data.data.length) {
                               that.endPullupToRefresh();
                               // mui('#refreshContainer').pullRefresh().refresh();
                           } else {
                               // true表示没有更多数据了，不再查询
                               that.endPullupToRefresh(true);
                               // mui('#refreshContainer').pullRefresh().refresh(true);
                           }
                       }, 2000)
                    })
                }
            }
        }


    });
    // 6、上拉加载下一页，没有数据就不用加载了

})

//获取搜索内容
var getSearchData = function (params, callback) {
    $.ajax({
        url: '/product/queryProduct',
        type: 'get',
        data: params,
        dataType: 'json',
        success: function (data) {
            window.page = data.page
            callback && callback(data)
        }

    })
}
